<template>
	<view class="home_container">
		<view class="head" :style="{paddingTop: heightOfStatusBar + 44 + 'px' }">
			<view class="icon">
				<image src="/static/images/logo.png" mode=""></image>
			</view>
			
			<view class="title">
				三江纸制品有限公司小程序
			</view>
			
			<view class="announcement">
				<view class="announcement_title">
					公告区
				</view>
				
				<view class="text">
					{{ noticeContent }}
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="content_announcement"></view>
			
			<view class="content_title">
				功能选择
			</view>
			
			
			<view class="nav_list">
				<view class="item green mr20" @click="openCamera('scanCode', '1')">
					成品组装
				</view>
				<view class="item green" @click="openCamera('scanCode', '2')">
					微定制/四色印刷组装
				</view>
				
				<view class="item blue mr20" @click="openCamera('scanCode', '3')">
					包装件组装
				</view>
				<view class="item blue" @click="openCamera('scanCode', '4')">
					餐具盒定制
				</view>
				
				<view class="item orange mr20" @click="openCamera('scanCode', '5')">
					生日帽定制
				</view>
				<view class="item orange" @click="openCamera('scanCode', '6')">
					不锈钢定制
				</view>
				
				<view class="item purple mr20" @click="openCamera('scanCode', '12')">
					半成品工序
				</view>
				<view class="item purple" @click="openCamera('scanCode', '7')">
					餐盘定制
				</view>
				
				<view class="item disabled mr20" @click="openCamera('scanCode', '8')">
					不锈钢定制-独立产品
				</view>
				<view class="item disabled" @click="openCamera('scanCode', '11')">
					验收入库
				</view>
				
				<view class="item lightBlue mr20" @click="openCamera('scanCode', '9')">
					餐盘定制logo
				</view>
				<view class="item lightBlue" @click="openCamera('scanCode', '10')">
					四色印刷
				</view>
			</view>
		</view>
	
		
		<!-- <view class="">
			<u-button  @click="openCamera('scanCode')" text="月落"></u-button>
			<u-button type="primary" text="确定"></u-button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeContent: ''
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.handleAnnouncement()
		},
		computed: {
			heightOfStatusBar() {
				return this.$store.state.statusBarHeight
			}
		},
		methods: {
			// 获取公告
			async handleAnnouncement() {
				try {
					const {data} = await this.$api.getAnnouncementApi()
					
					this.noticeContent = data.noticeContent
				} catch (error) {
					//TODO handle the exception
				}
			},
			openCamera(mode, type) {
				const {
					cameraAuthorized,
					microphoneAuthorized,
					osName
				} = uni.getSystemInfoSync()
			
				if (!cameraAuthorized) {
					uni.showModal({
						title: '提示',
						content: '您关闭了摄像头权限，请允许微信使用摄像头权限',
						confirmText: '去设置',
						success: (res)=> {
							if(res.confirm) {
								uni.openAppAuthorizeSetting()
							}
						}
					})
					return
				}
				// ios 摄像头&麦克风绑定
				if (!microphoneAuthorized && osName === 'ios') {
					uni.showModal({
						title: '提示',
						content: '您关闭了麦克风权限，请允许微信使用麦克风权限',
						confirmText: '去设置',
						success: (res)=> {
							if(res.confirm) {
								uni.openAppAuthorizeSetting()
							}
						}
					})
					return
				}
				console.log(type, '123123')
				uni.navigateTo({
					url:`/pages/camera/camera?mode=${mode}&type=${type}`
				})
			}
		}
	}
</script>

<style lang="scss">
.home_container {
	.head {
		background-color: #363636;
		
		.icon {
			padding-left: 30rpx;
			image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}
		}
		
		.title {
			padding-left: 30rpx;
			color: #FFF;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}
		
		.announcement {
			width: 690rpx;
			margin: 20rpx auto 0;
			background-color: #FFF;
			border-top: 1rpx solid #BCBCBC;
			border-left: 1rpx solid #BCBCBC;
			border-right: 1rpx solid #BCBCBC;
			padding: 20rpx;
			
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			
			&_title {
				color: #333;
				font-weight: bold;
			}
			
			.text {
				color: #333;
				padding: 20rpx;
				font-size: 26rpx;
			}
		}
		
	}
	
	
	
	
	
	
	.content {
		background-color: #F5F5F5;
		width: 100%;
		
		padding: 0 30rpx;
		
		&_announcement {
			width: 690rpx;
			margin: 0 auto;
			background-color: #FFF;
			height: 50rpx;
			border-bottom: 1rpx solid #BCBCBC;
			border-bottom-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
		}
		
		&_title {
			color: #333;
			font-weight: bold;
			margin: 20rpx;
		}
		
		.nav_list {
			display: flex;
			flex-wrap: wrap;
		}
		
		.item {
			width: 335rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFF;
			font-weight: bold;
			height: 200rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}
		
		.green {
			background-color: #B3E19D;
		}
		.blue {
			background-color: #69AFF0;
		}
		.orange {
			background-color: #E99D42;
		}
		.purple {
			background-color: #DF9BF9;
		}
		.disabled {
			background-color: #c3c6c9;
		}
		.lightBlue {
			background-color: #CFE6FF;
		}
	}
}
</style>